<template>
	<div id="orders">
		<div class="title_div">
			我的订单
		</div>

		<!-- 内容 -->
		<div class="item_div">
			<div class="item_top_div">
				<span>大厦</span>
				<span>已取消</span>
			</div>
			<div class="item_buttom_div">
				<!-- 存放图片 -->
			<div class="item_botton_left_div">
				<img src="../assets/orders/YingTao.png">
				<img src="../assets/orders/YingTao.png">
				<img src="../assets/orders/YingTao.png">
				<img src="../assets/orders/YingTao.png">
			</div>
			<!-- 存放价格数量 -->
			<div class="item_botton_right_div">
				<p>￥66.69</p>
				<p>共:6件</p>
			</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
						"shopName": "沃尔玛",
						"status": "已取消",
						imgs: [require("../assets/orders/YingTao.png"), require("../assets/orders/YingTao.png"),
							require("../assets/orders/YingTao.png"), require("../assets/orders/YingTao.png")
						],
						price: 66.69,
						num: 6
					},
					{
						"shopName": "大商",
						"status": "已取消",
						imgs: [require("../assets/orders/YingTao.png"), require("../assets/orders/YingTao.png")],
						price: 36.88,
						num: 2
					}
				]
			}
		}
	}
</script>

<style>
	/* 单独给页面设置背景色 */
	#orders {
		background-color: #f8f8f8;
		height: 100%;
		position: fixed;
		/* 固定定位 */
		width: 100%;
	}

	.title_div {
		height: 44px;
		font-size: 16px;
		color: #333333;
		background-color: white;
		line-height: 44px;
		/* 行高 */
		text-align: center;
		/* 左右居中 */
	}
	.item_div{
		background: #FFFFFF;
		margin-top: 16px;
		margin-left: 18px;
		margin-right: 18px;
		border-radius: 4px;				/* div圆角 */
		padding-left: 16px;
		padding-right: 16px;
	}
	.item_botton_left_div img{
		width: 40px;
		height: 40px;
	}
</style>
